<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root button {
            padding: 5px;
            margin: 5px;
        }

        #root button.active {
            background: red;
        }

        #root div {
            width: 500px;
            height: 200px;
            background: green;
        }
    </style>
    <!--  react核心库  -->
    <script src="lib/react.development.js"></script>
    <!--  reactdom:操作DOM  -->
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<!--指定挂载的位置-->
<div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector('#root'))
    class App extends React.Component{
        state = {
            index: 0
        }
        render() {
            return (
                <>
                    <button onClick={function() {this.setState({index: 0})}.bind(this)} className={this.state.index===0?'active':''}>中国</button>
                    <button onClick={function() {this.setState({index: 1})}.bind(this)} className={this.state.index===1?'active':''}>日本</button>
                    <button onClick={function() {this.setState({index: 2})}.bind(this)} className={this.state.index===2?'active':''}>韩国</button>
                    <div style={{display: this.state.index===0?'block':'none'}}>中国新闻</div>
                    <div style={{display: this.state.index===1?'block':'none'}}>日本新闻</div>
                    <div style={{display: this.state.index===2?'block':'none'}}>韩国新闻</div>
                </>
            )
        }
    }

    root.render(<App/>)

</script>
</html>